import 'package:auto_route/auto_route.dart';
import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../utils/bt_app_bar_utils.dart';
import '../utils/bt_chat_actions.dart';
import 'models/bt_chat_model.dart';
import 'widgets/bt_chat_message_list_widget.dart';
import 'widgets/bt_chat_voice_hold_widget.dart';
import 'widgets/bt_chat_voice_record_widget.dart';

@RoutePage(name: "chatRoute")
class BtChatPage extends StatefulWidget {
  const BtChatPage({super.key, required this.targetId, required this.targetName, required this.targetAvatar});

  final String targetId;

  final String targetName;

  final String targetAvatar;

  @override
  State<StatefulWidget> createState() => _BtChatState();
}

class _BtChatState extends State<BtChatPage> with SingleTickerProviderStateMixin {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => BtChatModel(widget.targetId, widget.targetAvatar)),
      ],
      child: Consumer<BtChatModel>(builder: (context, model, _) {
        return Scaffold(
            backgroundColor: Colors.white,
            appBar: appBar(
              context,
              widget.targetName,
              [
                Visibility(
                  visible: !model.isCustomerService,
                  child: Padding(
                      padding: const EdgeInsets.only(right: 20),
                      child: InkWell(
                        child: Image.asset(
                          'assets/images/bt_icon_chat_actions.png',
                          width: 28,
                          height: 28,
                        ),
                        onTap: () {
                          showChatActionsModal(context, widget.targetId, model);
                        },
                      )),
                )
              ],
            ),
            body: Stack(
              children: [
                Column(
                  children: [
                    Expanded(
                      child: Container(
                        color: const Color(0xFFF6F7F8),
                        child: BtChatMessageListWidget(model: model),
                      ),
                    ),
                    Container(
                      height: model.showEmoji ? 336 : 126,
                      decoration: const BoxDecoration(
                        color: Color(0xFFF6F7F8),
                        border: Border(
                          top: BorderSide(
                            color: Colors.black12,
                            width: 0.5,
                          ),
                        ),
                      ),
                      padding: const EdgeInsets.only(left: 20, right: 20, top: 10),
                      child: Column(
                        children: [
                          Visibility(
                            visible: !model.holdToTalk,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Container(
                                  width: MediaQuery.of(context).size.width - 126,
                                  height: 36,
                                  decoration: BoxDecoration(
                                    color: const Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(8),
                                  ),
                                  child: TextField(
                                    maxLines: null,
                                    keyboardType: TextInputType.text,
                                    textInputAction: TextInputAction.send,
                                    autofocus: false,
                                    textAlign: TextAlign.start,
                                    style: const TextStyle(fontSize: 13),
                                    decoration: const InputDecoration(
                                      border: InputBorder.none,
                                      contentPadding: EdgeInsets.only(left: 12, right: 12, bottom: 12),
                                      hintText: 'Enter here......',
                                      hintStyle: TextStyle(
                                        fontSize: 10,
                                        color: Color(0x4d000000),
                                      ),
                                    ),
                                    controller: model.tfCtl,
                                    onEditingComplete: () {
                                      model.sendTextMessage();
                                    },
                                  ),
                                ),
                                InkWell(
                                  child: Container(
                                    width: 63,
                                    height: 32,
                                    margin: const EdgeInsets.only(top: 2),
                                    padding: const EdgeInsets.only(top: 3),
                                    decoration: BoxDecoration(
                                      color: const Color(0xFF4DB4FF),
                                      borderRadius: BorderRadius.circular(30),
                                    ),
                                    child: const Text(
                                      'Send',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        fontSize: 16,
                                        color: Colors.white,
                                      ),
                                    ),
                                  ),
                                  onTap: () {
                                    model.sendTextMessage();
                                  },
                                )
                              ],
                            ),
                          ),
                          Visibility(
                            visible: model.holdToTalk,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                BtChatVoiceHoldWidget(model: model),
                                InkWell(
                                  child: Container(
                                    width: 63,
                                    height: 32,
                                    margin: const EdgeInsets.only(top: 2),
                                    padding: const EdgeInsets.only(top: 3),
                                    decoration: BoxDecoration(
                                      color: const Color(0xFF4DB4FF),
                                      borderRadius: BorderRadius.circular(30),
                                    ),
                                    child: const Text(
                                      'Send',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        fontSize: 16,
                                        color: Colors.white,
                                      ),
                                    ),
                                  ),
                                  onTap: () {
                                    model.sendTextMessage();
                                  },
                                )
                              ],
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(left: 8, right: 8, top: 8),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                InkWell(
                                  child: Image.asset(
                                    'assets/images/bt_icon_chat_voice.png',
                                    width: 24,
                                    height: 24,
                                  ),
                                  onTap: () => model.setHoldToTalk(!model.holdToTalk),
                                ),
                                InkWell(
                                  child: Image.asset(
                                    'assets/images/bt_icon_chat_archive.png',
                                    width: 24,
                                    height: 21,
                                  ),
                                  onTap: () {
                                    model.pickAndSendFileMessage();
                                  },
                                ),
                                InkWell(
                                  child: Image.asset(
                                    'assets/images/bt_icon_chat_pic.png',
                                    width: 24,
                                    height: 21,
                                  ),
                                  onTap: () {
                                    model.pickAndSendImageMessage();
                                  },
                                ),
                                InkWell(
                                  child: Image.asset(
                                    'assets/images/bt_icon_chat_smile.png',
                                    width: 24,
                                    height: 24,
                                  ),
                                  onTap: () {
                                    model.setShowEmoji(!model.showEmoji);
                                  },
                                ),
                              ],
                            ),
                          ),
                          _buildEmojiPicker(model)
                        ],
                      ),
                    ),
                  ],
                ),
                Visibility(
                  visible: model.voiceRecording != null,
                  child: BtChatVoiceRecordWidget(isVoiceRecordCanSend: model.voiceRecording ?? false),
                )
              ],
            ));
      }),
    );
  }

  _buildEmojiPicker(BtChatModel model) {
    return Offstage(
      offstage: !model.showEmoji,
      child: SizedBox(
          height: 250,
          child: EmojiPicker(
            textEditingController: model.tfCtl,
            onBackspacePressed: () {
              model.onBackspacePressed();
            },
            config: const Config(
              columns: 7,
              emojiSizeMax: 30,
              verticalSpacing: 0,
              horizontalSpacing: 0,
              gridPadding: EdgeInsets.zero,
              initCategory: Category.RECENT,
              bgColor: Color(0xFFF2F2F2),
              indicatorColor: Colors.blue,
              iconColor: Colors.grey,
              iconColorSelected: Colors.blue,
              backspaceColor: Colors.blue,
              skinToneDialogBgColor: Colors.white,
              skinToneIndicatorColor: Colors.grey,
              enableSkinTones: true,
              recentTabBehavior: RecentTabBehavior.RECENT,
              recentsLimit: 28,
              replaceEmojiOnLimitExceed: false,
              noRecents: Text(
                'No Recent',
                style: TextStyle(fontSize: 20, color: Colors.black26),
                textAlign: TextAlign.center,
              ),
              loadingIndicator: SizedBox.shrink(),
              tabIndicatorAnimDuration: kTabScrollDuration,
              categoryIcons: CategoryIcons(),
              buttonMode: ButtonMode.MATERIAL,
              checkPlatformCompatibility: true,
            ),
          )),
    );
  }
}
